:root {
  --x-link-fg: hsl(0 0% 95% / 0.95);
  --x-link-bg: hsl(0 0% 15% / 0.95);
  --x-link-bg-hover: hsl(0 0% 20% / 0.95);
  --x-link-bg-active: hsl(0 0% 25% / 0.95);
  @media (prefers-color-scheme: dark) {
    --x-link-fg: hsl(0 0% 100% / 0.95);
    --x-link-bg: hsl(0 0% 10% / 0.95);
    --x-link-bg-hover: hsl(0 0% 15% / 0.95);
    --x-link-bg-active: hsl(0 0% 20% / 0.95);
  }
}
.main {
  display: flex;
  align-items: center;
  gap: var(--x-gutter-sm);
  cursor: pointer;
  border: none;
  border-radius: 10rem;
  background: var(--x-link-bg);
  padding: var(--x-gutter-sm) var(--x-gutter);
  color: var(--x-link-fg);
  text-decoration: none;
  &:hover {
    background: var(--x-link-bg-hover);
    color: var(--x-link-fg);
    text-decoration: none;
  }
  &:active {
    background: var(--x-link-bg-active);
    color: var(--x-link-fg);
    text-decoration: none;
  }
}
